<template>
    <div class="totalbox">
        <!-- <dv-border-box-10 :color="['#43658d', '#34A4FF']"> -->
        <div class="top">
            <img src="@/assets/image/home/stj.png" class="jpng" alt="">
            <div class="st">
                设备统计
            </div>
            <div class="sbtns flex-start" @click="open">
                <div class="sts">查看</div>
                <img src="@/assets/image/home/bf.png" class="bf" alt="">
            </div>
        </div>

        <div class="flex-center mg22 p-r">
            <img src="@/assets/image/home/lj.png" class="jicon" alt="">
            <div class="et">电表</div>
            <img src="@/assets/image/home/rj.png" class="jicon" alt="">
            <img src="@/assets/image/home/tbgt.png" class="tbgti" alt="">
        </div>

        <div class="slist flex-between">
            <div class="sitem flex-center">
                <img src="@/assets/image/home/stotal.png" class="total" alt="">
                <div class="">
                    <div class="ttotal">设备总数</div>
                    <div class="num">{{ screenStore.totalMessage.electricityTotalCount }}</div>
                </div>
            </div>

            <div class="sitem flex-center">
                <img src="@/assets/image/home/sonline.png" class="total" alt="">
                <div class="">
                    <div class="ttotal">在线设备</div>
                    <div class="num">{{ screenStore.totalMessage.electricityOnlineCount }}</div>
                </div>
            </div>

            <div class="sitem flex-center">
                <img src="@/assets/image/home/snone.png" class="total" alt="">
                <div class="">
                    <div class="ttotal">离线设备</div>
                    <div class="num">{{ screenStore.totalMessage.electricityOfflineCount }}</div>
                </div>
            </div>
        </div>

        <div class="flex-center mg22 p-r" style="margin-top: 38px;">
            <img src="@/assets/image/home/lj.png" class="jicon" alt="">
            <div class="et">水表</div>
            <img src="@/assets/image/home/rj.png" class="jicon" alt="">
            <img src="@/assets/image/home/tbgt.png" class="tbgti" alt="">
        </div>

        <div class="slist flex-between">
            <div class="sitem flex-center">
                <img src="@/assets/image/home/stotal.png" class="total" alt="">
                <div class="">
                    <div class="ttotal">设备总数</div>
                    <div class="num">{{ screenStore.totalMessage.waterTotalCount }}</div>
                </div>
            </div>

            <div class="sitem flex-center">
                <img src="@/assets/image/home/sonline.png" class="total" alt="">
                <div class="">
                    <div class="ttotal">在线设备</div>
                    <div class="num">{{ screenStore.totalMessage.waterOnlineCount }}</div>
                </div>
            </div>

            <div class="sitem flex-center">
                <img src="@/assets/image/home/snone.png" class="total" alt="">
                <div class="">
                    <div class="ttotal">离线设备</div>
                    <div class="num">{{ screenStore.totalMessage.waterOfflineCount }}</div>
                </div>
            </div>
        </div>
        <!-- </dv-border-box-10> -->
        <draw-tan-one ref="tanone"></draw-tan-one>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import drawTanOne from '@/components/drawTanOne.vue'
const { proxy } = getCurrentInstance()
import { useScreenStore } from '../store/index.js'
const screenStore = useScreenStore()
let tanone = ref(null)
let open = () => {
    tanone.value.open()
}

let countDeviceNum = async () => {
    let res = await proxy.$https.countDeviceNum({
        campusId: screenStore.campusId,
        dormitoryId: screenStore.dormitoryId
    })
    console.log('countDeviceNum', res);
    screenStore.setTotalMessage(res.data)
}

let timerEandW = ref(null)
onMounted(() => {
    setTimeout(() => {
        countDeviceNum()
    }, 500)
    timerEandW.value = setInterval(() => {
        countDeviceNum()
    }, 180000)
})

onUnmounted(() => {
    if (timerEandW.value !== null) {
        clearInterval(timerEandW.value)
    }
})


</script>

<style lang='less' scoped>
.totalbox {
    background-image: url('@/assets/image/home/sbbd.png');
    background-size: 492px 409px;
    background-repeat: no-repeat;
    width: 492px;
    height: 409px;
    overflow: hidden;

    .top {
        background-image: url('@/assets/image/home/tbg.png');
        background-size: 492px 52px;
        background-repeat: no-repeat;
        width: 492px;
        height: 52px;
        padding: 10px 13px 0px;
        position: relative;

        .jpng {
            width: 480px;
            height: 45px;
            margin-left: -28px;
            margin-top: -5px;
        }

        .st {
            color: #fff;
            font-size: 20px;
            position: absolute;
            font-weight: bold;
            top: 10px;
            left: 52px;
            background: linear-gradient(180deg, #FFF 55.26%, #34E1FF 93.42%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .sbtns {
            border-radius: 2px;
            border: 1px solid rgba(29, 178, 255, 0.27);
            position: absolute;
            right: 50px;
            top: 8px;
            padding: 5px 15px;

            .sts {
                color: #21BCFF;
                font-size: 15px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }

            .bf {
                width: 7px;
                height: 9px;
                margin-left: 5px;
            }
        }
    }

    .mg22 {
        margin-top: 22px;
        animation: opacityChange 1.3s infinite;
    }

    @keyframes opacityChange {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    .jicon {
        width: 9.2px;
        height: 14.3px;
    }

    .et {
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 2.2px;
        background: linear-gradient(180deg, #FFF 65.62%, #30CCEA 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        padding: 0px 17px;
    }

    .tbgti {
        width: 124px;
        height: 34px;
        position: absolute;
    }

    .slist {
        margin: 15.8px 23px 0px;

        .sitem {
            width: 142px;
            height: 85px;
            background-image: url('@/assets/image/home/smain.png');
            background-size: 142px 85px;
            background-repeat: no-repeat;
            background-color: rgba(8, 39, 84, 0.7);

            .total {
                width: 47px;
                height: 65px;
                margin-right: 13px;
                animation: floating 1.5s infinite;
            }

            @keyframes floating {
                0% {
                    transform: translateY(0);
                    /* 初始位置 */
                }

                50% {
                    transform: translateY(-2px);
                    /* 向上移动4像素 */
                }

                100% {
                    transform: translateY(2px);
                    /* 回到初始位置 */
                }
            }

            .ttotal {
                color: #FFF;
                font-size: 13px;
                font-style: normal;
                line-height: normal;
                margin-bottom: 2px;
            }

            .num {
                color: #21BCFF;
                font-size: 25px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }
        }

    }



}
</style>